<template>
      <div class="contentview-main">
        <div class="search-box" ref="bookListShow">
          <el-popover placement="bottom-start" v-model="visible" trigger="manual" width="500">
            <el-table :data="list" @row-click="onClickItem" @row-dblclick="onDblClickSelect">
              <el-table-column property="bName" label="书籍名称"></el-table-column>
              <el-table-column property="bAuthor" label="作者"></el-table-column>
              <el-table-column property="bPublish" label="出版社"></el-table-column>
              <el-table-column property="operation" label="操作">
                <el-button @click="toRouter('/bookBorrow')">查看详情</el-button>
              </el-table-column>
            </el-table>
            <div slot="reference">
              <el-input placeholder="请输入内容" v-model="value" @change="getBooksInfo"></el-input>
              <el-button @click="visible = !visible">搜索</el-button>
            </div>
          </el-popover>
          <el-radio v-model="bookType" label="悬疑恐怖类">悬疑恐怖</el-radio>
          <el-radio v-model="bookType" label="情感类">情感</el-radio>
          <el-radio v-model="bookType" label="科幻类">科幻</el-radio>
          <el-radio v-model="bookType" label="教育类">教育</el-radio>
          <el-radio v-model="bookType" label="科学科技类">科学科技</el-radio>
          <el-radio v-model="bookType" label="古典小说类">古典小说</el-radio>
        </div>
      </div>
</template>

<script>
  import { bookSearch,bookSearchByType } from "../../api/bookSearch"

  import { setbookName,setbookType } from "../../utils/cacheProcessing"
    export default {
        name: "bookSearch",
      props:{
        isVisible: false,
      },
      data () {
        return {
          width:600,
          height:300,
          value:'',
          visible:false,
          bookType:"悬疑恐怖类",
          list:[],
        }
      },
      mounted(){
      },
      methods:{
        onClickItem(row){
          this.value = row.name;
          this.visible = false;
        },
        onDblClickSelect(row){
          this.value = row.name;
          this.visible = false;
        },
        getBooksInfo(){
          let requestData = {
            bookName:this.value,
            bookType:this.bookType
          }
          bookSearch(requestData).then(res=>{
            this.list = res.data.data
              console.log(this.list)
          }).catch(err=>{

          })
        },
          getBooksInfoByType(){
              let requestData = {
                  pageNum:1,
                  bookType:this.bookType
              }
              bookSearchByType(requestData).then(res=>{
                  this.list = res.data.data.datas
                  console.log(this.list)
                  this.visible = true
              }).catch(err=>{

              })
          },
        toRouter(name){
          setbookName(this.value)
          setbookType(this.bookType)
          this.$router.push(name)
        }
      },
      watch:{
          bookType:function () {
              console.log(this.bookType)
            this.getBooksInfoByType()
          }
      }
    }
</script>

<style lang="scss" scoped>
.contentview-main{
  padding: 10px 0px 10px 10px;
}
  .search-box{
    margin-top: 100px;
    margin-left: 30%;
    // margin: auto;
    width: 600px;

  }
  .el-input{
    width: 500px;
  }
.el-popover{
  width:600px !important;
}
</style>
